<template>
    <div>
			<div v-if="issave">
			    <p class="perrightwdzl"><span style="cursor:pointer" @click="searchall">查看所有地址</span></p>
			    <div class="perform" :class="{isreadonly:!isreadonly}">
			        <form action>
			            <div class="input-box">
			            姓名 <span style="margin-left:2.50rem;cursor:pointer" @click="adddress">添加新地址</span>
			            <input type="text" class="inputf" :readonly="isreadonly" v-model="data.name">
			            </div>

			            <div class="input-box">
			            联系电话(11位)
			            <input type="text" class="inputf" :readonly="isreadonly" v-model="data.phone">
			            </div>
			            <div class="input-box">
			              地址
			              <div class="input-box-dz" v-if="isv">
			                  <v-distpicker :province="province" :city="city" :disabled="isreadonly" hide-area @selected="onSelected"></v-distpicker>
			              </div>
			            </div>
			            <div class="input-box">
			            详细地址
			            <input type="text" class="inputf" :readonly="isreadonly" v-model="data.detail">
			            </div>
			            <div class="input-box">
			                <input type="button" value="保存" class="mytb" @click="saveclick" :class="{noal:isreadonly}">
			                <input type="button" value="修改" class="mytb mytb2" @click="isreadonly=false">
			            </div>
			        </form>
			    </div>
			</div>
			<div v-else>
				<p style="font-size:0.24rem;margin-top:.5rem;margin-bottom:.5rem;">您没有收货地址</p>
				<span style="font-size:0.24rem;cursor:pointer;padding-left:2.5rem" @click="adddress">添加新地址</span>
			</div>
		</div>
</template>
<script>
import Distpicker from "v-distpicker";
import { mapGetters, mapActions } from "vuex";
import async from "async";
import Bus from './bus.vue'
export default {
  components: { VDistpicker: Distpicker },

  data() {
    return {
			issave:true,
      isreadonly: true,
      isv:true,
      province:"北京市",
      city:"北京城区",
      data: {
        uid: "2",
        name: "",
        phone: "",
        province: '北京市',
        city: "北京城区",
        detail: ""
      }
    };
  },
  created() {
    this.data.uid=this.uid
    this.bj();
  },
  methods: {
    bj(){
      Bus.$on("bj",i=>{
      this.data=i;
      this.province=this.data.province;
      this.city=this.data.city;
      console.log(this.province,this.city)
      this.$emit("bj")
    })
    },
    adddress(){
      this.$emit("add")
    },
    searchall(){
      this.$emit("searchall")
    },
    onSelected(data) {
      console.log(data.province)
      this.data.province = data.province.value;
      this.data.city = data.city.value;
    },
    saveclick() {
      if (!this.isreadonly) {
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if(myreg.test(this.data.phone)){

        }else{
          alert("请输入正确联系电话")
          return ;
        }
				if(this.data.name&&myreg.test(this.data.phone)&&this.data.detail){
					this.axios({
					  method: "put",
					  url: `${this.$config.dataUrl}/users/address/action/modify`,
					  params: this.data,
					}).then(res => {
					  if(res.data.status==200){
							this.isreadonly=true;
					    alert("修改成功")
					  }
					});
				}else{
					alert("请输入完成信息")
				}
      }
    },
    newaddress() {}
  },
  computed: {
    ...mapGetters(["login", "uid"]) //boolean
  },
  watch:{
    province(val){
      this.data.province=val;
    },
    city(val){
      this.data.city=val
    },
			isreadonly(v){
				if(!this.isreadonly){
					document.getElementsByClassName("inputf")[0].focus()
				}
			}

  },
  activated() {
        this.data.uid=this.uid;
          this.axios({
            url: `${this.$config.dataUrl}/users/address/${this.uid}`
          }).then(res => {
              if(res.data.data&&res.data.data.length>0){
                var vdata=res.data.data[0];
                this.data = vdata;
                var province=this.data.province;
                var city=this.data.city;
                this.data=JSON.parse(JSON.stringify(this.data))
                this.city=this.data.city;
                this.province=this.data.province
                console.log(this.data)
								this.issave=true;
              }else{
								this.issave=false;
							}

          })
  }
};
</script>
<style  scoped>
.perrightwdzl {
  margin-top: 0.13rem;
  font-size: 0.16rem;
  margin-bottom: 0;
}
.input-box {
  margin-top: 0.2rem;
}
.mytb {
  background-color: #b49d7e;
  width: 0.5rem;
  height: 0.3rem;
  border: 0;
  color: #fffefe;
  font-size: 0.12rem;
  float: left;
  cursor: pointer;
}
.mytb2 {
  margin-left: 0.2rem;
}
.sexbtn {
  width: 0.5rem;
  height: 0.3rem;
  border: 0;
  color: #000;
  outline: none;
  float: left;
}
.sexbtn.active {
  background-color: #b49d7e;
  color: #fffefe;
}
.perform {
  font-size: 0.12rem;
  line-height: 1em;
}
.inputf {
  display: block;
  height: 0.5rem;
  width: 3.8rem;
  outline: none;
  border: 0.01rem #ccc solid;
  padding-left: 0.1rem;
  background-color: #f2f2f2;
  margin-top: 0.06rem;
}
.input-box-dz {
  margin-top: 0.06rem;
  cursor: pointer;
  font-size: 0.16rem;
}
input{
	cursor:not-allowed
}

.isreadonly input{
	cursor: text;
}
.isreadonly input[type=button]{
  cursor: pointer;
}
.noal{
	cursor: not-allowed;
}
</style>
<style>
.input-box .distpicker-address-wrapper select {
  background-color: #f2f2f2;
}
</style>
<style>
.input-box .input-box-dz select {
  font-size: 0.16rem;
  padding: 0;
  border-radius: 0;
}
.input-box-dz select{
	cursor:not-allowed
}
.isreadonly .input-box-dz select{
	cursor:pointer
}
</style>
